<template>
  <div class="workContent" v-cloak>
    <div class="workItem" @click="distributionMap(); addClass('distributionMap')">
      <text class="icon-text" :style="{fontFamily: 'wxcIconFont'}" :class="[this.pIndexKey == 'distributionMap'?'active':'']">{{'\ue677'}}</text>
      <text class="text" :class="[this.pIndexKey == 'distributionMap'?'active':'']">工程分布图</text>
    </div>
    <div class="workItem" @click="summary(); addClass('summary')">
      <text class="icon-text" :style="{fontFamily: 'wxcIconFont'}" :class="[this.isActive('summary')]">{{'\ue667'}}</text>
      <text class="text" :class="[this.isActive('summary')]">施工进度汇总</text>
    </div>
    <div class="workItem" @click="progress(); addClass('progress')">  
      <text class="icon-text" :style="{fontFamily: 'wxcIconFont'}" :class="[this.isActive('progress')]">{{'\ue6c3'}}</text>
      <text class="text" :class="[this.isActive('progress')]">安装进度</text>
    </div>
    <div class="workItem" @click="completion(); addClass('completion')">
      <text class="icon-text" :style="{fontFamily: 'wxcIconFont'}" :class="[this.isActive('completion')]">{{'\ue63e'}}</text>
      <text class="text" :class="[this.isActive('completion')]">厂家完成</text>
    </div>
    <div class="workItem" @click="account(); addClass('account')">
      <text class="icon-text" :style="{fontFamily: 'wxcIconFont'}" :class="[this.isActive('account')]">{{'\ue602'}}</text>
      <text class="text" :class="[this.isActive('account')]">汇总台账</text>
    </div>
    <div class="workItem" @click="heating(heating); addClass('heating')">
      <text class="icon-text" :style="{fontFamily: 'wxcIconFont'}" :class="[this.isActive('heating')]">{{'\uea04'}}</text>
      <text class="text" :class="[this.isActive('heating')]">用能供暖</text>
    </div>
  </div>
</template>
<script>
import { addIconFontSupport } from '@/config/iconConfig.js';
const dom = weex.requireModule('dom');
const navigator = weex.requireModule('navigator');
const modal = weex.requireModule('modal');
export default {
  name: 'workContent',
  data () {
    return {
      pIndexKey:'',
      datalist: []
    }
  },
  created () {
    addIconFontSupport(dom, "../../");
    getCache(CTCE_DATALIST).then(res => {
      this.datalist = res
    })
    
  },
  methods: {
    isActive (_c) {
      return this.pIndexKey === _c ?'active':''
    },
    addClass (_key) {
      if(this.pIndexKey === _key) return;
      this.pIndexKey = _key;
    },
    distributionMap () {
      navigator.push({
        url: this.getBaseUrl() + 'projectDistribution.js',
        animated: "true"
      })
    },
    summary () {
      navigator.push({
        url: this.getBaseUrl() + 'summary.js',
        animated: "true"
      })
    },
    progress () {
      navigator.push({
        url: this.getBaseUrl() + 'ipHome.js',
        animated: "true"
      })
    },
    completion () {
      navigator.push({
        url: this.getBaseUrl() + 'comHome.js',
        animated: "true"
      })
    },
    account () {
      navigator.push({
        url: this.getBaseUrl() + 'ledgerHome.js',
        animated: "true"
      })
    },
    heating () {
      navigator.push({
        url: this.getBaseUrl() + 'ehHome.js',
        animated: "true"
      })
    }
  }
}
</script>
<style scoped>
.workContent{
  width: 750px;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  padding-left: 30px;
  padding-right: 30px;
}
.workItem{
  width: 230px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
  padding-top: 104.1px;
}
.active{
  color: rgba(62,175,252,1);
}
.text{
  font-size:29.1px;
  font-family:PingFangSC-Semibold;
  color:rgba(151,151,151,1);
  padding-top: 23px;
}
.icon-text {
  font-size: 70px;
  color: rgba(204,204,204,1);
}
[v-cloak] {
  display: none;
}
</style>


